<template>
  <view class="valueCardBuy">
    <view v-if="cardlist.length > 0">
      <view class="item" @tap="toOrder">
        <text class="name">{{ currentCard.name }}</text>
        <text class="value">￥{{ currentCard.value }}</text>
        <image class="image" mode="aspectFill" :src="currentCard.image" />

        <view class="order">
          <view @tap="toOrder">购卡订单 <text class="iconfont icon-arrow-right" />
          </view>
        </view>
      </view>

      <view class="card-box">
        <view class="hot-title-bar" @tap="hot">
          <text class="hot-title-text">热销卡</text>
          <view class="hot-title-instru">
            <text>购卡须知</text>
            <text class="iconfont icon-help-filling" />
          </view>
        </view>

        <scroll-view class="hotlist" :style="{height: winHeight+'px'}" scroll-y="true" scroll-top="0">
          <block v-for="(item, index) in cardlist" :key="index">
            <view @tap="swiperChange(index)">
              <view :class="['card-item', item.id == currentCard.id ? 'active' : '']">
                <image class="card-bg" src="http://127.0.0.1:8888/static/images/images/stored_card/stored_card_red.png" />
                <text class="card-name">{{ item.themeName }}</text>
                <text class="card-money">￥{{ item.value }}</text>
                <image class="card-cart" src="http://127.0.0.1:8888/static/images/images/stored_card/card_cart.png" />
              </view>
            </view>

          </block>

        </scroll-view>
      </view>
    </view>
    <u-empty v-if="cardlist.length===0" mode="data" margin-top="40%" text="还没有储值卡上线" icon="http://cdn.uviewui.com/uview/empty/data.png" />
  </view>
</template>
<script>
const util = require('@/utils/util.js')
import { cardList } from '@/api/api1'
export default {
  components: {},
  data() {
    return {
      cardlist: [],
      currentCard: {}
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    }
  },
  onLoad() {
    this.init()
  },
  onReachBottom() {
  },

  methods: {
    toOrder(e) {
      uni.$u.route('/pages/valueCards/buyConfirm/index', {
        card: JSON.stringify(this.data.currentCard)
      })
    },
    swiperChange(e) {
      this.currentCard = this.cardlist[e]
    },
    init() {
      cardList({
        status: 'Y'
      }).then(res => {
        const cardlist = res.data

        this.cardlist = cardlist
        if (cardlist !== undefined && cardlist.length > 0) {
          this.currentCard = cardlist[0]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.valueCardBuy {
  display: flex;
  flex-direction: column;
}

/* 轮播图 */
.item {
  width: 100%;
  height: 505rpx;
}

.swiper-block {
  height: 420rpx;
  width: 100%;
}

.item {
  position: relative;
}

.item .image {
  position: relative;
  height: 70%;
  width: 80%;
  border-radius: 47rpx;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.2);
  top: 7%;
  left: 10%;
}

.item .name {
  display: block;
  position: absolute;
  z-index: 21;
  transform: translateX(0%);
  top: 16%;
  left: 16%;
  font-family: cursive;
  color: #ffffff;
  font-size: 42rpx;
  font-weight: 600;
  letter-spacing: 4rpx;
}

.item .value {
  display: block;
  position: absolute;
  z-index: 21;
  font-family: fantasy;
  color: #ffffff;
  font-size: 60rpx;
  top: 60%;
  left: 65%;
}

.order {
  position: absolute;
  color: #555555;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  right: 40rpx;
  bottom: 4%;
  letter-spacing: 2rpx;
}

/* 热销卡标题 */
.hot-title-bar {
  position: relative;
  height: 54rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 44rpx;
}

.hot-title-text {
  position: absolute;
  font-size: 34rpx;
  font-family: PingFang, PingFang-SC;
  color: #000000;
  font-weight: 600;
  letter-spacing: 4rpx;
}

.hot-title-instru {
  position: absolute;
  font-size: 20rpx;
  font-family: PingFang, PingFang-SC;
  color: #959595;
  font-weight: 500;
  right: 0%;
  bottom: 0%;
  display: flex;
}

/* 热销卡 */
.card-box {
  width: 100%;
}

.hotlist {
  height: 100%;
  overflow: hidden;
}

.card-item {
  position: relative;
  height: 180rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  box-shadow: 0px 28rpx 70rpx 0 rgba(0, 0, 0, 0.13);
  background: #ffffff;
  border-radius: 32rpx;
  margin-top: 20rpx;
}

.card-item.active {
  background-color: darkgrey;
}

.card-bg {
  position: absolute;
  width: 162rpx;
  height: 112rpx;
  top: 19%;
  left: 5%;
}

.card-cart {
  position: absolute;
  width: 69rpx;
  height: 69rpx;
  top: 27%;
  right: 10%;
}

.card-name {
  position: absolute;
  font-size: 30rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: SC;
  color: #000000;
  font-weight: 600;
  top: 20%;
  left: 32%;
  letter-spacing: 2rpx;
}

.card-money {
  position: absolute;
  font-size: 38rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: SC;
  text-align: left;
  color: #e27844;
  top: 53%;
  left: 31%;
}
</style>
